<template>
  <div class="frame-jBV-2" :style="{ background: frameBgColor }">
    <div class="vec-rectangle-EjO-1" :style="{ background: textBgColor }"></div>
    <!-- <div class="text-kbe-2">
      <div class="p-text-kbe-2"><span class="span-nDy-1">图表</span></div>
    </div> -->
    <div class="text-tfC-3">
      <div class="p-text-tfC-3">
        <span class="span-exU-1" style="margin-right: 10px">{{
          indexText
        }}</span>
        <svg-icon
          icon-class="stopdl"
          v-if="
            !props.testInfo.endtime &&
            props.status &&
            props.status != '断电' &&
            props.status != ''
          "
          width="20"
          height="20"
          @click="sendData"
        >
        </svg-icon>
      </div>
    </div>
    <div class="frame-Kro-4">
      <div
        class="frame-mri-1"
        :style="{ width: boardType === '三路电' ? '32%' : '48%' }"
      >
        <div class="frame-Mqx-1">
          <div class="frame-BPr-1">
            <div class="text-pYQ-1">
              <div class="p-text-pYQ-1">
                <span class="span-wiA-1">V1:</span>
              </div>
            </div>
            <div class="text-shR-2">
              <div class="p-text-shR-2">
                <span class="span-YXn-1">{{ props.nuclearPowerVoltage }}V</span>
              </div>
            </div>
          </div>
          <div class="frame-BPr-1">
            <div class="text-pYQ-1">
              <div class="p-text-pYQ-1">
                <span class="span-wiA-1">A1:</span>
              </div>
            </div>
            <div class="text-shR-2">
              <div class="p-text-shR-2">
                <span class="span-YXn-1">{{ props.nuclearPowerCurrent }}A</span>
              </div>
            </div>
          </div>
          <div class="frame-BPr-1">
            <div class="text-pYQ-1">
              <div class="p-text-pYQ-1">
                <span class="span-wiA-1">L1:</span>
              </div>
            </div>
            <div class="text-shR-2">
              <div class="p-text-shR-2">
                <span class="span-YXn-1">{{
                  props.nuclearPowerLatchCount
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="frame-mri-1"
        :style="{ width: props.boardType === '三路电' ? '32%' : '48%' }"
      >
        <div class="frame-Mqx-1">
          <div class="frame-BPr-1">
            <div class="text-pYQ-1">
              <div class="p-text-pYQ-1">
                <span class="span-wiA-1">V2:</span>
              </div>
            </div>
            <div class="text-shR-2">
              <div class="p-text-shR-2">
                <span class="span-YXn-1"
                  >{{ props.auxiliaryPowerVoltage }}V</span
                >
              </div>
            </div>
          </div>
          <div class="frame-BPr-1">
            <div class="text-pYQ-1">
              <div class="p-text-pYQ-1">
                <span class="span-wiA-1">A2:</span>
              </div>
            </div>
            <div class="text-shR-2">
              <div class="p-text-shR-2">
                <span class="span-YXn-1"
                  >{{ props.auxiliaryPowerCurrent }}mA</span
                >
              </div>
            </div>
          </div>
          <div class="frame-BPr-1">
            <div class="text-pYQ-1">
              <div class="p-text-pYQ-1">
                <span class="span-wiA-1">L2:</span>
              </div>
            </div>
            <div class="text-shR-2">
              <div class="p-text-shR-2">
                <span class="span-YXn-1">{{
                  props.auxiliaryPowerLatchCount
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="frame-mri-1" v-if="props.boardType === '三路电'">
        <div class="frame-Mqx-1">
          <div class="frame-BPr-1">
            <div class="text-pYQ-1">
              <div class="p-text-pYQ-1">
                <span class="span-wiA-1">V3:</span>
              </div>
            </div>
            <div class="text-shR-2">
              <div class="p-text-shR-2">
                <span class="span-YXn-1">{{ props.bankVoltage }}V</span>
              </div>
            </div>
          </div>
          <div class="frame-BPr-1">
            <div class="text-pYQ-1">
              <div class="p-text-pYQ-1">
                <span class="span-wiA-1">A3:</span>
              </div>
            </div>
            <div class="text-shR-2">
              <div class="p-text-shR-2">
                <span class="span-YXn-1">{{ props.bankCurrent }}mA</span>
              </div>
            </div>
          </div>
          <div class="frame-BPr-1">
            <div class="text-pYQ-1">
              <div class="p-text-pYQ-1">
                <span class="span-wiA-1">L3:</span>
              </div>
            </div>
            <div class="text-shR-2">
              <div class="p-text-shR-2">
                <span class="span-YXn-1">{{ props.bankLatchCount }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="frame-QIM-4">
        <div class="frame-rvQ-1">
          <div class="text-ike-1">
            <div class="p-text-ike-1">
              <span class="span-JPw-1">翻转个数:</span>
            </div>
          </div>
          <div class="text-rji-2">
            <div class="p-text-rji-2">
              <span class="span-OUW-1">{{ props.flipCount }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineProps } from "vue";
import { sendControl } from "@/api/device/mqttSend";

// 添加 Element Plus 消息和确认框组件导入
import { ElMessageBox, ElMessage } from "element-plus";
// 计算属性，根据状态值返回 text-UML-3 的背景色
const textBgColor = computed(() => {
  switch (props.status) {
    case "正常":
      return "rgba(59, 179, 70, 1)";
    case "烧毁":
      return "rgba(249, 57, 32, 1)";
    case "退化":
      return "rgba(252, 136, 0, 1)";
    case "断电":
      return "rgba(110, 116, 122, 1)";
    default:
      return "rgba(59, 179, 70, 1)";
  }
});

// 计算属性，根据状态值返回 frame-qxo-1 的背景色
const frameBgColor = computed(() => {
  switch (props.status) {
    case "正常":
      return "rgba(240, 249, 241, 1)";
    case "烧毁":
      return "rgba(255, 240, 238, 1)";
    case "退化":
      return "rgba(255, 246, 235, 1)";
    case "断电":
      return "rgba(244, 244, 245, 1)";
    default:
      return "rgba(240, 249, 241, 1)";
  }
});
const props = defineProps({
  // 图表文本
  chartText: {
    type: String,
    default: "图表",
  },
  // Index 文本
  indexText: {
    type: String,
    default: "Index 1",
  },
  // 核电源电压
  nuclearPowerVoltage: {
    type: Number,
    default: 0,
  },
  // 核电源电流
  nuclearPowerCurrent: {
    type: Number,
    default: 0,
  },
  // 核电源锁存计数
  nuclearPowerLatchCount: {
    type: Number,
    default: 0,
  },
  // 电池组电压
  bankVoltage: {
    type: Number,
    default: 0,
  },
  // 电池组电流
  bankCurrent: {
    type: Number,
    default: 0,
  },
  // 电池组锁存计数
  bankLatchCount: {
    type: Number,
    default: 0,
  },
  // 辅助电源电压
  auxiliaryPowerVoltage: {
    type: Number,
    default: null,
  },
  // 辅助电源电流
  auxiliaryPowerCurrent: {
    type: Number,
    default: null,
  },
  // 辅助电源锁存计数
  auxiliaryPowerLatchCount: {
    type: Number,
    default: null,
  },
  // 新增板卡ID属性
  boardid: {
    type: String,
    default: "",
  },
  // 新增组件ID属性
  componentid: {
    type: String,
    default: "",
  },

  // 状态属性
  status: {
    type: String,
    default: "正常",
  },
  // 翻转个数属性
  flipCount: {
    type: Number,
    default: 0,
  },
  enableboardstatus: {
    type: String,
    default: "",
  },
  boardType: {
    type: String,
    default: "",
  },
  datasourceindex: {
    type: String,
    default: "",
  },
  type: {
    type: String,
    default: "ic",
  },
  deviceid: {
    type: String,
    default: "",
  },

  testInfo: {
    type: Object,
    default: () => {},
  },
});
const sendData = () => {
  ElMessageBox.confirm("关闭电流？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    // 准备发送的数据，包含系统配置和板卡配置
    const dataToSend = {
      datasourceindex: props.datasourceindex,
      type: props.type,
      deviceid: props.deviceid,
      message: {
        type: "器件操作",
        config: {
          componentid: `${props.boardid}-${props.componentid}`,
          control: "断电",
        },
      },
    };
    // 调用发送 API
    sendControl(dataToSend).then((res) => {
      ElMessage.success("操作下发");
      // 可添加成功提示
    });
  });
};
</script>
<style scoped>
.frame-jBV-2 {
  position: relative;
  z-index: 2;
  height: 42px;
  border-radius: 2px;
  mix-blend-mode: normal;
  display: flex;
  opacity: 1;
  background: rgba(240, 249, 241, 1);
  box-sizing: border-box;
}
.vec-rectangle-EjO-1 {
  position: absolute;
  z-index: 0;
  left: 1px;
  top: 1px;
  width: 6%;
  height: 40px;
  border-radius: 1px 0px 0px 1px;
  mix-blend-mode: normal;
  background: rgba(59, 179, 70, 1);
}
.text-kbe-2 {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 1;
  justify-content: start;
  right: 2%;
  top: 13px;
  height: 16px;
  mix-blend-mode: normal;
  color: rgba(42, 121, 250, 1);
  font-size: 16px;
  line-height: 16px;
  font-weight: 400;
  opacity: 1;
  font-family: "AlibabaPuHuiTi-Regular";
  letter-spacing: 0px;
  white-space: nowrap;
}
.text-tfC-3 {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 2;
  justify-content: start;
  left: 9px;
  top: 13px;
  height: 16px;
  mix-blend-mode: normal;
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  opacity: 1;
  font-family: "AlibabaPuHuiTi-Medium";
  letter-spacing: 0px;
  white-space: nowrap;
}
.frame-Kro-4 {
  position: absolute;
  z-index: 4;
  left: 6%;
  top: 5px;
  width: 80%;
  height: auto;
  mix-blend-mode: normal;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
}
.frame-mri-1 {
  position: relative;
  z-index: 1;
  width: 32%;
  height: 32px;
  mix-blend-mode: normal;
  display: flex;
  background: rgba(255, 255, 255, 1);
  overflow: hidden;
  order: 0;
  flex-shrink: 0;
}
.frame-Mqx-1 {
  position: absolute;
  z-index: 1;
  left: 16px;
  top: 8px;
  width: auto;
  height: auto;
  mix-blend-mode: normal;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 28px;
  right: 16px;
  bottom: 6px;
}
.frame-BPr-1 {
  position: relative;
  z-index: 1;
  width: 30%;
  height: auto;
  mix-blend-mode: normal;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
  order: 0;
  min-width: auto;
}
.frame-ZjI-2 {
  position: relative;
  z-index: 2;
  width: auto;
  height: auto;
  mix-blend-mode: normal;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  order: 1;
  min-width: auto;
}
.frame-jLI-3 {
  position: relative;
  z-index: 3;
  width: auto;
  height: auto;
  mix-blend-mode: normal;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  order: 2;
  min-width: auto;
}
.text-pYQ-1 {
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 0;
  justify-content: start;
  height: 16px;
  mix-blend-mode: normal;
  color: rgba(0, 1, 3, 0.45);
  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
  opacity: 1;
  font-family: "AlibabaPuHuiTi-Regular";
  letter-spacing: 0px;
  white-space: nowrap;
  order: 0;
  width: auto;
}
.text-shR-2 {
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 1;
  justify-content: start;
  height: 16px;
  mix-blend-mode: normal;
  color: rgba(0, 1, 3, 0.85);
  font-size: 18px;
  line-height: 16px;
  font-weight: 500;
  opacity: 1;
  font-family: "AlibabaPuHuiTi-Medium";
  letter-spacing: 0px;
  white-space: nowrap;
  order: 1;
  width: auto;
}
.frame-QIM-4 {
  position: relative;
  z-index: 4;
  width: 119px;
  height: 32px;
  mix-blend-mode: normal;
  display: flex;
  background: rgba(255, 255, 255, 1);
  overflow: hidden;
  order: 3;
  flex-shrink: 0;
}
.frame-rvQ-1 {
  position: absolute;
  z-index: 1;
  left: 16px;
  top: 8px;
  width: auto;
  height: auto;
  mix-blend-mode: normal;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
}
.text-ike-1 {
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 0;
  justify-content: start;
  height: 16px;
  mix-blend-mode: normal;
  color: rgba(0, 1, 3, 0.45);
  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
  opacity: 1;
  font-family: "AlibabaPuHuiTi-Regular";
  letter-spacing: 0px;
  white-space: nowrap;
  order: 0;
  width: auto;
}
.text-rji-2 {
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 1;
  justify-content: start;
  height: 16px;
  mix-blend-mode: normal;
  color: rgba(0, 1, 3, 0.85);
  font-size: 18px;
  line-height: 16px;
  font-weight: 500;
  opacity: 1;
  font-family: "AlibabaPuHuiTi-Medium";
  letter-spacing: 0px;
  white-space: nowrap;
  order: 1;
  width: auto;
}
</style>
